import AppDescriptions from '../app-descriptions/AppDescriptions.vue';
import AppDescriptionsItem from '../app-descriptions-item/AppDescriptionsItem.vue';

export default {
  title: '校园物联/描述',
  component: AppDescriptions,
  parameters: {
    docs: {
      description: {
        component: `请配合 <span style="font-weight: bold;font-size: 14px;color: grey">vue、tailwindcss</span> 使用`
      }
    }
  },
  argTypes: {
    title: {description: '标题'},
    column: {description: '列数'},
    'title-extra': {description: '标题右部分'},
    default: {description: '整个下部分'},
  }
};

export const Basic = {
  name: '基本使用',
  render: (args) => ({
    components: {AppDescriptions, AppDescriptionsItem},
    setup() {
      return {args};
    },
    template: `
      <AppDescriptions v-bind="args" style="width: 800px">
        <template v-slot:title-extra>
          <el-button text type="primary">插槽</el-button>
        </template>

        <AppDescriptionsItem
          v-for="(item,index) in 'ABCDE'"
          :key="index"

          :label="'描述项'+item"
          :tip="'描述项'+item+'的提示'"
          :value="'描述值'+item"
        />
      </AppDescriptions>`,
  }),
  args: {
    title: '基本描述',
    column: 3,
  }
};